<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="img/favicon.ico" /> 
</head>
<body>
    <video controls src="video/video.mp4"></video>

    <canvas id="canvas" width="600px" height="1000px"></canvas>
    
      <script>
          let video = document.querySelector("video");
          
          
          let canvas = document.querySelector("#canvas");
          let cvsCtx = canvas.getContext("2d")

          let draw;
          video.onplay = function(){
            draw = setInterval(function(){
                cvsCtx.clearRect(0, 0, 600, 1000);
                cvsCtx.drawImage(video, 0, 0, 600, 1000); 
                cvsCtx.font = "20px 微软雅黑";
                cvsCtx.fillStyle = "red"
                cvsCtx.fillText('我的视频', 500, 100);
                
                console.log(cvsCtx.getImageData(0,0,50,50))
            },16)

          }

          video.onpause = function(){
              clearInterval(draw)
          }





      </script>

</body>
</html>